<template>
  <div class="container app-container">
    <div class="company-title">
      <div class="company-title-box">
        <div class="company-title-box__title">
          <h1>{{ detail ? detail.originPortName : '--' }}</h1>
          <el-image :src="arrowsImg" style="width: 100px; margin: 0 -15px 0 -15px" fit="contain" />
          <h1>{{ detail ? detail.destPortName : '--' }}</h1>
          <el-tag v-if="detail.state === 1" type="success"> {{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 2">{{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 3" type="warning">{{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 4" style="color: #dee2e6" color="gray">
            {{ detail.stateStr }}
          </el-tag>
          <el-tag v-if="detail.state === 5" type="info">{{ detail.stateStr }}</el-tag>
        </div>
        <div class="company-title-box__credit">订单号：{{ detail ? detail.orderNo : '--' }}</div>
      </div>
      <div class="company-title-box-btn">
        <el-button
          type="primary"
          plain
          size="mini"
          v-if="detail.state !== 4 && detail.state !== 5"
          @click="updateShip(detail.id)"
          >编辑</el-button
        >
        <el-button
          type="warning"
          plain
          size="mini"
          v-if="detail.state === 2 && detail.state !== (4 || 5)"
          @click="startOrStop(detail, 3)"
          >暂停</el-button
        >
        <el-button
          type="warning"
          plain
          size="mini"
          v-if="detail.state === 3 && detail.state !== (4 || 5)"
          @click="startOrStop(detail, 2)"
          >恢复</el-button
        >
        <el-button
          type="danger"
          plain
          size="mini"
          v-if="detail.state !== 4 && detail.state !== 5"
          @click="startOrStop(detail, 4)"
          >结束</el-button
        >
      </div>
    </div>

    <div class="company-context-box">
      <el-descriptions :column="1" title="| 基础信息" :label-style="{ marginLeft: '40px' }">
        <el-descriptions-item
          v-for="(item, index) in baseDescriptionItems"
          :key="index"
          :label="item.label"
        >
          {{ item.value }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { getDetail, batchUpdateStatus } from '@/api/orders/orderCargo';
export default {
  data() {
    return {
      detail: {
        id: null, //订单id
        companyName: '', //归属企业
        originPortName: '', //始发港
        destPortName: '', //目的港
        cargoName: '', //货物名称
        cargoWeight: 0, //货物重量
        cargoDate: '', //装货日期
        floatingDays: 0, //浮动天数
        priceType: 0, //价格类型
        priceTypeStr: '', //价格类型
        price: 0, //承运价格
        contacts: '', //联系人
        contactPhone: '', //联系电话
        stateStr: '', //订单状态
        state: 0, //订单状态
        createType: 0, // 创建方式
        createTypeStr: '', // 创建方式
        createName: '', //创建人
        createTime: '', //创建时间
        updateTime: '', //更新时间
        updateName: '', //更新人
      },
      arrowsImg: require('@/assets/images/arrows.png'),
    };
  },
  computed: {
    baseDescriptionItems() {
      return [
        { label: '归属企业', value: this.detail ? this.detail.companyName : '' },
        { label: '始发港', value: this.detail ? this.detail.originPortName : '' },
        { label: '目的港', value: this.detail ? this.detail.destPortName : '' },
        {
          label: '货物名称',
          value: this.detail ? this.detail.cargoName : '',
        },

        { label: '货物重量', value: `${this.detail ? this.detail.cargoWeight : ''}吨` },

        {
          label: '装货日期',
          value: `${this.detail ? this.detail.cargoDate : ''} ± ${this.detail ? this.detail.floatingDays : ''} 天`,
        },

        { label: '价格类型', value: this.detail ? this.detail.priceTypeStr : '' },

        { label: '承运价格', value: this.detail ? this.detail.price : '' },
        { label: '联系人', value: this.detail ? this.detail.contacts : '' },

        { label: '联系人手机号', value: this.detail ? this.detail.contactPhone : '' },
        { label: '备注', value: this.detail ? this.detail.remark : '' },

        { label: '创建方式', value: this.detail ? this.detail.createTypeStr : '' },
        { label: '创建人', value: this.detail ? this.detail.createName : '' },
        { label: '创建时间', value: this.detail ? this.detail.createTime : '' },
        { label: '更新人', value: this.detail ? this.detail.updateName : '' },
        { label: '更新时间', value: this.detail ? this.detail.updateTime : '' },
      ];
    },
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    // 获取货源订单详情
    getDetail() {
      getDetail(this.$route.query.id).then((res) => {
        this.detail = res.data;
      });
    },
    /**
     * 编辑
     * @param id
     */
    updateShip(id) {
      this.$router.push({ name: 'OrdersCargoAddOrEdit', query: { id: id } });
    },
    // 启用/停用
    startOrStop(row, state) {
      let textTip = ['禁用', '恢复'][row.state];
      this.$confirm(`是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        batchUpdateStatus({
          ids: row.id,
          state,
        }).then(() => {
          console.log(row.state);
          this.$message.success(`${['', '', '暂停', '恢复'][row.state]}成功`);
          this.getDetail();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.company-context-box {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
}

.company-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
  .company-title-box {
    .company-title-box__title {
      h1 {
        margin: 0;
      }
      display: flex;
      gap: 32px;
      margin-bottom: 10px;
    }
  }
}

.container {
  background-color: rgb(240, 243, 246);
}
</style>
